<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>无忧体检</title>
    <meta name="description" content="无忧体检">
    <meta name="keywords" content="无忧体检">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css2/index.css">
    <link rel="stylesheet" href="css2/font-awesome.min.css">
    <link rel="stylesheet" href="css2/styles.css">
    <style>
        .grid-content {
            border-radius: 4px;
            min-height: 40px;
        }
        .table{
            background: #fcfcfc;
            text-align: right;
        }
        .table textCenter{
            background: #fcfcfc;
            text-align: right;
        }

    </style>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">


        <h1 style="text-align: center">统计分析</h1>

    </div>
    <div class="app-container">
        <div class="box" style="height: 900px">
            <div class="excelTitle" >
                <el-button @click="exportExcel">导出Excel</el-button>
                运营数据统计
            </div>
            <div class="excelTime">日期：{{reportData.reportDate}}</div>
            <table class="exceTable" cellspacing="0" cellpadding="0">
                <tr>
                    <td colspan="4" class="headBody">会员数据统计</td>
                </tr>
                <tr>
                    <td width='20%' class="table">新增会员数</td>
                    <td width='30%'>{{reportData.todayNewMember}}</td>
                    <td width='20%' class="table">总会员数</td>
                    <td width='30%'>{{reportData.totalMember}}</td>
                </tr>
                <tr>
                    <td class="table">本周新增会员数</td>
                    <td>{{reportData.thisWeekNewMember}}</td>
                    <td class="table">本月新增会员数</td>
                    <td>{{reportData.thisMonthNewMember}}</td>
                </tr>
                <tr>
                    <td colspan="4" class="headBody">预约到诊数据统计</td>
                </tr>
                <tr>
                    <td class="table">今日预约数</td>
                    <td>{{reportData.todayOrderNumber}}</td>
                    <td class="table">今日到诊数</td>
                    <td>{{reportData.todayVisitsNumber}}</td>
                </tr>
                <tr>
                    <td class="table">本周预约数</td>
                    <td>{{reportData.thisWeekOrderNumber}}</td>
                    <td class="table">本周到诊数</td>
                    <td>{{reportData.thisWeekVisitsNumber}}</td>
                </tr>
                <tr>
                    <td class="table">本月预约数</td>
                    <td>{{reportData.thisMonthOrderNumber}}</td>
                    <td class="table">本月到诊数</td>
                    <td>{{reportData.thisMonthVisitsNumber}}</td>
                </tr>
                <tr>
                    <td colspan="4" class="headBody">热门套餐</td>
                </tr>
                <tr class="table textCenter">
                    <td >套餐名称</td>
                    <td>预约数量</td>
                    <td>占比</td>
                    <td>备注</td>
                </tr>
                <tr v-for="setMeal in reportData.hotSetmeal">
                    <td style="text-align: right">{{setMeal.name}}</td>
                    <td style="text-align: right">{{setMeal.setmeal_count}}</td>
                    <td style="text-align: right">{{setMeal.proportion}}</td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>

<script src="js/vue.js"></script>
<script src="css2/index.js"></script>
<script src="plugins/jquery/dist/jquery.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data:{
            reportData:{
                reportDate:null,
                todayNewMember :0,
                totalMember :0,
                thisWeekNewMember :0,
                thisMonthNewMember :0,
                todayOrderNumber :0,
                todayVisitsNumber :0,
                thisWeekOrderNumber :0,
                thisWeekVisitsNumber :0,
                thisMonthOrderNumber :0,
                thisMonthVisitsNumber :0,
                hotSetmeal :[
                    {name:'关爱精英体检套餐',setmeal_count:200,proportion:0.222},
                    {name:'关爱父母体检套餐',setmeal_count:200,proportion:0.222}
                ]
            }
        },
        created() {
            // 给axios 设置了一个 timeout 的连接超时时间
            axios.defaults.timeout = 5000;

            axios.get("/report/getMemberReport").then((res)=>{

                    this.reportData = res.data.data;

            });
        },
        //导出Excel
        // 由于导出表格不是简单传输数据，需要涉及页面跳转，为此不使用axios发送请求
        methods:{
            exportExcel(){
                window.location.href = '/report/exportBusinessReport';
            }
        }
    })
</script>
</html>
